<script lang="ts">

</script>

<template>
  <el-menu
    router class="menu" mode="horizontal" background-color="rgb(59, 130, 246)" text-color="#fff"
    :style="{ 'border-bottom': 'none' }"
    active-text-color="#fff"
  >
    <el-menu-item index="1" class="text-2xl" route="/">
      <template #title>
        <el-icon i-carbon:pdf-reference />
        <span class="text-xl">转PDF</span>
      </template>
    </el-menu-item>
    <el-menu-item index="2" route="/edit">
      <el-icon i-carbon:generate-pdf />
      <span class="text-xl">输出页面</span>
    </el-menu-item>
    <el-menu-item index="3" route="/open">
      <el-icon i-carbon:document-pdf />
      <span class="text-xl">打开</span>
    </el-menu-item>
    <el-menu-item index="4" route="/about">
      <el-icon i-carbon:information-square />
      <span class="text-xl">关于</span>
    </el-menu-item>
  </el-menu>
</template>

<style lang="css" scoped>
.menu .el-menu-item:hover {
  background-color: rgb(59, 130, 246);
}
.menu .el-menu-item.is-active {
  background-color: rgb(59, 130, 246);
  border-bottom: 2px solid rgb(59, 130, 246);
}
.menu .el-icon {
  width: 32px;
  height: 328px;
}
</style>
